<template>
  <div>
    <div class="con">
      <div class="line-title">
        <div></div>
        <div>电缆夹层西南水浸报警</div>
        <div>
          <el-select
            v-model="datevalue"
            :style="{width: '100%'}"
          >
            <el-option
              v-for="(item, index) in dateOptions"
              :key="index"
              :label="item.interval"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </div>
      </div>
      <v-chart
        :options="option"
        :auto-resize="true"
        @click="chartClick"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
@Component
export default class barchart extends Vue {
  @Prop() barData!: any;
  public option: EChartOption = {
    color: ["#0c96fc"],
    xAxis: [
      {
        type: "category",
        data: ["2020-03-01", "2020-03-02", "2020-03-03", "2020-03-04"],
        axisLabel: {
          color: "#fff",
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    tooltip: {
      show: true,
      trigger: "axis",
    },
    legend: {
      show: true,
      textStyle: {
        color: "#fff",
      },
      right: "8%",
      top: "3%",
      icon: "rect",
    },
    grid: {
      top: "16%",
      bottom: "12%",
    },
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#1C2E70",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        data: [1, 2, 1, 1, 1, 1, 1],
        type: "line",
      },
    ],
  };
  @Prop() msg!: string;
  public chartClick(val: any): void {
    // console.log(val);
    this.$router.push({
      path: "/jointInspection/inspectionreport",
      query: val,
    });
  }

  @Watch("barData", { immediate: false, deep: true })
  getBarData(newVal: any) {
    // console.log("newVal", newVal);
    (this as any).option.series[0].data = newVal;
  }

  public datevalue = 1;
  dateOptions = [
    {
      interval: "年",
      id: 1,
    },
    {
      interval: "月",
      id: 2,
    },
  ];
  // private get newOption(): any {
  //   const option = this.option;
  //   return option;
  // }

  // private set newOption(param: number): void {
  //   this.option = param;
  // }
}
</script>
<style lang="scss" scoped>
.con {
  width: 100%;
  height: 50vh;
  position: relative;
  .line-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 0.6rem;
    align-items: center;
    > div {
      &:nth-child(1) {
        width: 150px;
      }
      &:nth-child(3) {
        width: 150px;
      }
    }
  }
  .echarts {
    width: 100%;
    height: calc(100% - 0.6rem);
  }
}
</style>